<template>
	<view class="grid-menu">
		<view class="grid-item" v-for="(item, index) in items" :key="index" @click="handleItemClick(item)">
			<view class="item-content">
				<image :src="item.icon" class="item-icon" />
				<text class="item-text">{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						id: "film",
						icon: '/static/grid/invite.png',
						text: '卖座电影'
					},
					{
						icon: '/static/grid/partner.png',
						text: '伙伴情况'
					},
					{
						icon: '/static/grid/record.png',
						text: '答题记录'
					},
					{
						icon: '/static/grid/answer.png',
						text: '参与答题'
					},
					{
						icon: '/static/grid/ranking.png',
						text: '排行榜'
					},
					{
						icon: '/static/grid/editname.png',
						text: '修改资料'
					},
					{
						icon: '/static/grid/feedback.png',
						text: '意见反馈'
					},
					{
						icon: '/static/grid/game.png',
						text: '罗盘游戏'
					},
					{
						icon: '/static/grid/team.png',
						text: '大团队长'
					},
					{
						icon: '/static/grid/team.png',
						text: '大团队长'
					},
					{
						icon: '/static/grid/team.png',
						text: '大团队长'
					},
					{
						icon: '/static/grid/team.png',
						text: '大团队长'
					},
					{
						icon: '/static/grid/team.png',
						text: '大团队长'
					},
					{
						icon: '/static/grid/team.png',
						text: '大团队长'
					},
					{
						icon: '/static/grid/team.png',
						text: '大团队长'
					},

					// Add more items as needed
				]
			}
		},
		methods: {
			handleItemClick(item) {
				if (item.text === '卖座电影') {
					uni.navigateTo({
						url: '/pages/index/forum/maizuofilm/maizuofilm'
					});
				} else if (item.text === '邀请伙伴') {
					uni.navigateTo({
						url: 'index/invite/invite'
					});
				} else if (item.text === '参与答题') {
					uni.navigateTo({
						url: 'index/studylist/studylist'
					});
				} else if (item.text === '排行榜') {
					uni.navigateTo({
						url: 'index/studyrank/studyrank'
					});
				} else if (item.text === '罗盘游戏') {
					uni.navigateTo({
						url: 'index/game/game'
					});
				} else if (item.text === '大团队长') {
					uni.navigateTo({
						url: 'index/team/team'
					});
				} else if (item.text === '意见反馈') {
					uni.navigateTo({
						url: 'index/opinion/opinion'
					});
				} else if (item.text === '修改资料') {
					uni.navigateTo({
						url: './my/my?method=handleEditProfile'
					});
				}

			}
		}
	}
</script>

<style scoped>
	.banner,
	.banner image {
		width: 750rpx;
		height: 350rpx;
	}

	.box {

		background-size: cover;
		padding: 20rpx;
		text-align: center;
		color: #fff;
		background-color: #ADD8E6;
	}

	.box-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.box-description {
		font-size: 16px;
	}

	.grid-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10px;
		background-color: #f4f4f4;
		margin-top: 30px;
		border: #FF9C8D;
		border-width: 200px;
	}

	.grid-item {
		width: 200rpx;
		margin-bottom: 15px;
		text-align: center;
		display: flex;
		/* 新增，使子元素可以使用Flex布局 */
		align-items: center;
		/* 新增，垂直居中子元素 */
		justify-content: center;
		/* 新增，水平居中子元素 */
	}

	.item-content {
		position: relative;
		/* 新增，为绝对定位的子元素提供参考 */
		width: 100%;
		/* 新增，确保内容宽度与父元素一致 */
	}

	.item-icon {
		width: 30px;
		height: 30px;
		margin-bottom: 20px;
	}

	.item-text {
		position: absolute;
		/* 新增，使文字绝对定位在图片上方 */
		bottom: 0;
		/* 新增，将文字定位到内容的底部 */
		left: 0;
		/* 新增，将文字定位到内容的左侧 */
		right: 0;
		/* 新增，将文字定位到内容的右侧 */
		font-size: 14px;
		text-align: center;
		/* 新增，确保文字水平居中 */
		color: #333;
		/* 新增，定义文字颜色，根据实际需要调整 */
		margin-top: 10px;
	}

	.box-title {
		font-size: 12px;
		/* 修改这里，调整标题文字大小 */
		font-weight: bold;
		margin-bottom: 10rpx;
	}
</style>